<!--
 * @Description: 
 * @Author: sanghx
 * @Date: 2020-03-13 20:38:51
 * @LastEditors: sanghx
 * @LastEditTime: 2020-03-15 12:21:26
 -->
<template>
  <div class="box">
    <div class="jigsaw1">
    </div>
    <div class="item-box">
      <div class="jigsaw2">
        <span></span>
      </div>
      <div class="jigsaw3">
        <span></span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.box {
    display: block;
}
.item-box {
    display: flex;
}

.jigsaw1,
.jigsaw2,
.jigsaw3 {
    font-size: 5px;
    width: 6em;
    height: 6em;
    position: relative;
}

.jigsaw1 {
    background-color: rgb(243, 152, 0);
    border-radius: 8% 8% 0 0;
}

.jigsaw1:after {
    content: '';
    width: 2em;
    height: 2em;
    position: absolute;
    top: 2em;
    left: 5.5em;
    border-radius: 50%;
    background-color: rgb(243, 152, 0);
}


.jigsaw2 {
    background-color: rgb(232, 56, 40);
    border-radius: 0 0 0 8%;
}

.jigsaw2 span {
    display: block;
    position: absolute;
    width: 2em;
    height: 2em;
    top: -1.8em;
    left: 2em;
    border-radius: 50%;
    background-color: rgb(232, 56, 40);
}

.jigsaw3 {
    background-color: rgb(90, 192, 197);
    border-radius: 0 8% 8% 0;
}

.jigsaw3 span {
    content: '';
    width: 2em;
    height: 2em;
    position: absolute;
    top: -.2em;
    left: 2em;
    border-radius: 50%;
    background-color:#3c2747;
}

.jigsaw3:before {
    content: '';
    width: 2em;
    height: 2em;
    position: absolute;
    top: 2.2em;
    left: -1.8em;
    border-radius: 50%;
    background-color: rgb(90, 192, 197);
}
</style>